<template>
    
    <div class="home">
        <div class="header">
            <div class="logo"></div>
            <div class="titleMain">
                <h1>全流程成材率分析优化模型</h1>
            </div>
        </div>
        <el-container class="root-element">
            <el-header class="h-5rem col-center">
                <div style="width:100%">
                    <span>连退生产结束时间：</span>
                    <el-date-picker
                        v-model="start"
                        type="datetime"
                        class="w-15vw"
                        placeholder="选择日期时间">
                        </el-date-picker>
                        <span> -- </span>
                        <el-date-picker
                        v-model="end"
                        type="datetime"
                        class="w-15vw "
                        placeholder="选择日期时间">
                    </el-date-picker>
                    <span style="margin-left:5px">成品总重量：{{ finishRate }}[t]</span>
                    <span style="margin-left:5px">原料总重量：{{ finishRate }}[t]</span>
                    <span style="margin-left:5px">O5板成材率：{{boardRate}}</span>
                    <el-button type="primary" @click="query" style="margin-left:80px"><i class="fa fa-search"></i>&nbsp;查询</el-button>
                    <el-button type="primary" @click="reset"><i class="fa fa-refresh"></i>&nbsp;重置</el-button>
                    <el-button type="primary" @click="exportExcel"><i class="fa fa-caret-right title-icon"></i>&nbsp;导出</el-button>
                </div>
                
            </el-header>
            <el-main class="h-85%" style="max-height:160px;overflow: hidden;">
                <el-row>
                    <el-col :span="8">
                    <div style="height: 120px;width:450px;padding-left:90px;">
                        <nercar-echarts
                        :title="option.title"
                        :series="option.series"
                        :legend="option.legend"
                        :graphic="option.graphic"
                        :tooltip="option.tooltip"
                        
                        />
                    </div>
                    </el-col>
                    <el-col :span="8">
                    <div style="height: 120px;width:450px;padding-left:90px;">
                        <nercar-echarts
                        :title="option1.title"
                        :series="option1.series"
                        :legend="option1.legend"
                        :graphic="option1.graphic"
                        :tooltip="option1.tooltip"
                        
                        />
                    </div>
                    </el-col>
                    <el-col :span="8">
                    <div style="height: 160px;width:450px;">
                        <nercar-echarts
                        :title="option2.title"
                        :series="option2.series"
                        :legend="option2.legend"
                        :graphic="option2.graphic"
                        :tooltip="option2.tooltip"
                        :x-axis="option2.xAxis"
                        :y-axis="option2.yAxis"
                        :grid="option2.grid"
                        
                        />
                    </div>
                    </el-col>
                </el-row>

            </el-main>
            <el-footer>
                <div class="base_table">
                    <el-table :data="pidMesInfo" ref="alarmTableRef" style="width: 100%;border:1px solid"
                              :header-cell-style="{ background: '#2f59af', color: '#fff',fontSize:'10px',border: 'none' }"
                              :cell-style="{fontSize:'10px'}"

                      >
                      <el-table-column prop="ITEM" label="序号" width="50"/>
                      <el-table-column prop="COIL_ID" label="热卷号" width="60"/>
                      <el-table-column prop="STEEL_MARK" label="酸轧出口卷号" width="60"/>
                      <el-table-column prop="STEEL_GRADE" label="连退出口卷号" width="60"/>
                      <el-table-column prop="EN_THICK" label="连退重量(t)" width="60"/>
                      <el-table-column prop="EX_THICK" label="重卷出口卷号" width="50"/>
                      <el-table-column prop="EN_WIDTH" label="重卷重量(t)" width="50"/>
                      <el-table-column prop="EX_WIDTH" label="成品重量(t)" width="50"/>
                      <el-table-column prop="YP" label="原料重量(t)" width="50"/>
                      <el-table-column prop="YPINDEX" label="连退生产结束时间" width="50"/>
                      <el-table-column prop="WIDINDEX" label="计划号" width="50"/>
                      <el-table-column prop="THKINDEX" label="合同号" width="50"/>
                      <el-table-column prop="THKINDEX" label="钢牌号(钢级)" width="50"/>
                      <el-table-column prop="THKINDEX" label="钢质代码" width="50"/>
                      <el-table-column prop="THKINDEX" label="材料厚度(mm)" width="50"/>
                      <el-table-column prop="THKINDEX" label="材料宽度(mm)" width="50"/>
                      <el-table-column prop="THKINDEX" label="表面级别" width="50"/>
                      <el-table-column prop="THKINDEX" label="分选度等级" width="50"/>
                      <el-table-column prop="THKINDEX" label="酸轧入口重量" width="50"/>
                      <el-table-column prop="THKINDEX" label="酸轧出口重量" width="50"/>
                      <el-table-column prop="THKINDEX" label="酸轧成材率" width="50"/>
                      <el-table-column prop="THKINDEX" label="连退入口重量" width="50"/>
                      <el-table-column prop="THKINDEX" label="连退出口重量" width="50"/>
                      <el-table-column prop="THKINDEX" label="连退成材率" width="50"/>
                      <el-table-column prop="THKINDEX" label="镀锌入口重量" width="50"/>
                      <el-table-column prop="THKINDEX" label="镀锌出口重量" width="50"/>
                      <el-table-column prop="THKINDEX" label="镀锌成材率" width="50"/>
                      <el-table-column prop="THKINDEX" label="重卷成材率" width="50"/>

                    </el-table>
                </div>

            </el-footer>
        </el-container>
        
    </div>

    
</template>
<script setup lang='ts'>
  import {ref} from "vue";
  import NercarEcharts from '/@/components/NercarEcharts/NercarEcharts.vue'
  import * as Echarts from 'echarts'
  const start = ref<Date>(new Date(new Date().getTime() - 1000 * 60 * 60 * 24));
  const end = ref<Date>(new Date());
  const finishRate=ref('3962.81');
  const rawMaterial=ref('4324.73');
  const boardRate=ref('91.63%');
  function reset(){
    finishRate.value = ""
    start.value = new Date(new Date().getTime() -1000*3600*24*7)
    end.value = new Date()
    rawMaterial.value=""
    boardRate.value=""
  }
  const option = {
    backgroundColor: '#0f0f31',//#0f0f31
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)" },
    color:["#27D9C8","#D8D8D8"],
    legend: {
        orient: 'vertical',
        left: 'left', // 图例在左侧显示
        data: ['A', 'B', 'C'], // 图例数据项名称，应与series中的data项名称对应
        textStyle:{
            fontSize:16,
            color:'#72a1d2'
        },
    },
    title: {
        // text: '91.63%',
        // left: 'center',
        // top: 'center',
        // textStyle:{
        //     fontSize:16,
        //     color:'#72a1d2'
        // },
        show:true,
           x:"left",
           text: 'O5板成材率',
           textStyle:{
              fontSize:16
              ,fontWeight:'normal'
              ,color:'#72a1d2'
          },
          left:20,
          top:10,
          borderColor :'#10395c',
    },
    series: [
        // {
        // name: 'O5板成材率',
        // type: 'pie',
        // label: {
        //     normal: {
        //     show: false,
        //     position: 'center' },   
        // },
        // avoidLabelOverlap: false,
        // data: [
        //     {
        //     value: 335,
        //     name: 'A'
        //     },
        //     {
        //     value: 234,
        //     name: 'B'
        //     },
        //     {
        //     value: 1548,
        //     name: 'C'
        //     }
        // ],
        // radius: ['40%', '70%']
        // }
        {
              name:'O5板成材率',
             type:'pie',
              radius:['40%','78%'],
              avoidLabelOverlap:false,
              color:['#32A8FF',' #02C800','#9f47fd'],
              formatter: '{b}: {d}',
              slient:true,
              markLine :{
                  label  :{
                      show:true,
                      position :'outside'  
                  },  
              },
              labelLine:{
                  normal:{  
                      show:true,
                      length:14  ,
                      length2 :56,
                  }  
              },
              label:{
                normal:{
                    show:true,
                    position:'center',
                    formatter:function(){
                        return '80%'
                    },
                    textStyle:{
                        fontSize:16,
                        color:'rgba(20, 180, 213, 0.9)',
                    }
                }  
              },
              emphasis:{
                show:true,
                textStyle:{
                    fontSize:30,
                    //fontWeight:'bold'
                }
              },
              
              data:[{value:1280,name:'成材率',itemStyle:{
                  normal:{
                      color: new Echarts.graphic.LinearGradient(0, 1, 1, 0, [{ 
                          //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
  
                         offset: 0,
                         color: '#2a8af6'
                     }])
                 },emphasis : {
                     label : {
                         show : true,
                         formatter : "{b}\n{d}%",
                         color:'white',
                     }
                 }
             }},{value:320,name:'不合格率',itemStyle:{
                 normal:{
                     color:'transparent',
                 }
             }}]
         },{
             name:'',
             type:'pie',
             radius:['38%','40%'],
             avoidLabelOverlap:false,
             legendHoverLink :false,
             label:{
               show:false,  
             },
             tooltip:{//禁止鼠标悬停显示提示框
                 show:false,
             },
             hoverAnimation:false ,//禁止鼠标悬停放大区域
             color:['#bcdbfa'],
              
             data:[{value:100}]
         }
    ],
    graphic: [ {
          type: 'group',
          id: 'textGroup2',
          left: 370,
          top: 400,
          position :[10, 0],
          children: [
             
              {
                  type: 'text',
                  z: 100,
                  top: 'middle',
                  left: 100,
                  style: {
                      formatter: "{a} <br/>{b}: {c} ({d}%)",
                      text: [
                          '已安装1280个',
                          '未安装320个',
                      ].join('\n'),
                      font: '16px cursive',
                      textVerticalAlign :'middle',
                      fill:'#13a7d1',
                      
                      
                  }
              }
          ]
      }],
};
const option1 = {
    backgroundColor: '#0f0f31',//#0f0f31
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)" },
    color:["#27D9C8","#D8D8D8"],
    legend: {
        show:false
    },
    title: {
        // text: '91.63%',
        // left: 'center',
        // top: 'center',
        // textStyle:{
        //     fontSize:16,
        //     color:'#72a1d2'
        // },
        show:true,
           x:"left",
           text: 'O5板缺陷统计',
           textStyle:{
              fontSize:16
              ,fontWeight:'normal'
              ,color:'#72a1d2'
          },
          left:20,
          top:10,
          borderColor :'#10395c',
    },
    series: [
        {
        name: 'O5板缺陷统计',
        type: 'pie',
        data: [
            {
            value: 335,
            name: 'A'
            },
            {
            value: 234,
            name: 'B'
            },
            {
            value: 1548,
            name: 'C'
            }
        ],
        label:{
            normal:{
                show:true,
                position:'center',
                formatter:function(){
                    return '总量2107'
                },
                textStyle:{
                    fontSize:10,
                    color:'rgba(20, 180, 213, 0.9)',
                }
            }  
        },
        radius: ['40%', '70%']
        }
    ],
    graphic: {},
};
const option2 = {
  xAxis: {
    splitLine: {     //网格线
      "show": false
    }
  },


  yAxis: {
      data: ['表面其他', '纵向条纹', '夹杂', '辊印'],
      splitLine: {     //网格线
        "show": false
      },
      axisLabel: {
        fontSize: 10 // 设置字体大小为14
      }
  },
  series: [
    {
      type: 'bar',
      data: [{
        value:23,
        itemStyle: { color: 'red',
                // 设置柱条的圆角
                barBorderRadius: [5, 5, 5, 5] // [左上角, 右上角, 右下角, 左下角]
            
        }
      }, 
      {
        value:24,
        itemStyle: { color: 'blue',
                // 设置柱条的圆角
                barBorderRadius: [5, 5, 5, 5] // [左上角, 右上角, 右下角, 左下角]
            
        }
      }, 
      {
        value:18, 
        itemStyle: { color: 'green',
                // 设置柱条的圆角
                barBorderRadius: [5, 5, 5, 5] // [左上角, 右上角, 右下角, 左下角]
            
        }
      },{
        value:25,  
        itemStyle: { color: 'yellow',
                // 设置柱条的圆角
                barBorderRadius: [5, 5, 5, 5] // [左上角, 右上角, 右下角, 左下角]
            } 
        
      }],
      
    }
  ],
  grid: {
    left: '18%',  // 调整左侧边距
    right: '10%', // 调整右侧边距，根据需要调整这些值和图表的整体大小
    top: '10%' // 调整底部边距，确保有足够的空间显示Y轴标签
  }
};

</script>
<style scoped lang="less">
.home {
  width: 100vw;
  background: url(/@/assets/images/home/body-bg.jpg) no-repeat;
}
.header {
  height: 10vh;
  background-image: url(/@/assets/images/head-bg.png);
  background-size: 100% 100%;

}
.col-center {
  display: flex;
  align-items: center;
}
.h-5rem{
    font-size: 14px;
}
.w-15vw{
    width: 15vw;
    font-size: 14px;
}
.el-button .fa:before {
  margin-right: 0.25rem;
}
.w-15vw{
  width: 15vw !important;
}
:deep(.w-15vw){
  width: 15vw !important;
}

::v-deep .el-table,
.el-table__expanded-cell {
  // margin-left: 5px !important;
  background-color: transparent !important;
}
::v-deep .el-table tr {
  background-color: transparent !important;
}

::v-deep .el-table tbody {
  background-color: transparent !important;
}


::v-deep .el-table--enable-row-transition .el-table__body td,
::v-deep .el-table .cell {
  background-color: transparent !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border: none !important;
}
:deep(.el-table tr) {
  background-color: #162556;
}
:deep(.el-table__inner-wrapper::before) {
  background-color: #173d91;
}

.base_table {
  width: 100%;
}

:deep(.el-table .cell) {
  line-height:10px

}





</style>

